<template>
  <div>
    <van-nav-bar left-arrow>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <h3>您已接单</h3>
    <div class="detail">
      <h4>订单详情</h4>
      <van-row>
        <van-col>
          <van-image
            round
            width="4rem"
            height="4rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </van-col>
        <van-col>
          <p>暂无车型记录</p>
          <p>手机尾号：1234</p>
        </van-col>
        <van-col>
          <van-image
            round
            width="4rem"
            height="4rem"
            src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3000016445,3641315424&fm=26&gp=0.jpg"
          />
        </van-col>
      </van-row>

      <p>起点：昌平地铁站</p>
      <p>终点：工商管理专修学院</p>
      <p>11.2公里<span>|</span>18分钟<span>|</span>约9个红绿灯</p>
      <p>计价：约33元</p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
h3 {
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: coral;
  background-color: lightblue;
}
.detail {
  margin: 10px;
  border: 2px solid orange;
  border-radius: 5px;
  padding: 5px;
}
.van-col {
  margin: 5px 10px;
}
h4 {
  height: 40px;
  line-height: 40px;
}
p {
  color: gray;
  margin: 5px;
  font-size: 12px;
}
span {
  margin: 0 8px;
  color: coral;
}
</style>